<script lang="ts">
    import { computed, defineComponent, h, onBeforeMount, onUnmounted, watch } from 'vue-demi';
    import Content from './pass.vue';
    import { useSettingStore } from '@/store/modules/settingStore';
    import { $y9_SSO } from '@/main';
    // const bgUrl = 'https://v3.cn.vuejs.org/logo.png'
    const settingStore = useSettingStore();
    const bgUrl = computed(() => settingStore.getLockScreenImage);
    // console.log(bgUrl.value);

    // 监听F12手动移除锁屏元素
    const lockStatus = computed(() => settingStore.getLockScreen);
    let timerList = [];

    // onUnmounted(() => {
    //     console.log("onUnmounted");

    // })
    // onBeforeMount(() => {
    //     console.log('onBeforeMount');

    // })

    // 当锁屏为true的时候 保证骨架视觉上不可见
    if (lockStatus.value) {
        getLockScreenState();
    }

    // 监听
    watch(lockStatus, () => {
        getLockScreenState();
    });

    function getLockScreenState() {
        timerList.push(
            setInterval(() => {
                // 保证骨架视觉上不可见 防止修改锁屏的css
                document.getElementById('indexlayout').style.display = 'none';
                // 删除标签 & 隐藏标签
                const lockDivClassName = document.getElementsByClassName('lock-div')[0]?.className;
                if (lockStatus.value && lockDivClassName !== 'lock-div') {
                    const params = {
                        logoutUrl: import.meta.env.VUE_APP_SSO_LOGOUT_URL + import.meta.env.VUE_APP_NAME + '/',
                    };
                    $y9_SSO.ssoLogout(params);
                }
            }, 100)
        );
        if (!lockStatus.value) {
            console.log(1);
            document.getElementById('indexlayout').style.display = '';
            timerList.forEach((item) => {
                clearInterval(item);
            });
        }
    }

    export default defineComponent({
        name: 'lock-comp',
        render() {
            return h(
                'div',
                {
                    class: 'lock-div',
                    // style: {
                    // backgroundImage: 'url(' + bgUrl.value + ')'
                    // }
                },
                h(Content)
            );
        },
    });
</script>
<style lang="scss" scoped>
    .lock-div {
        position: fixed;
        z-index: 9000;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-repeat: repeat;
        background-size: 100% 100%;
        // background-color: rgba($color: #000000, $alpha: 0.3);
        // filter: blur(10px);
    }
</style>
